视频播放器（ArkTS）

2023-06-10 03:38| 来源: 网络整理| 查看: 265

介绍

本篇Codelab使用ArkTS语言实现视频播放器，主要包括视频获取和视频播放功能：

获取本地视频和网络视频。通过AVPlayer进行视频播放。通过手势调节屏幕亮度和视频播放音量。相关概念 AVPlayer播放管理类：视频播放组件。XComponent：可用于EGL/OpenGLES和媒体数据写入，并显示在XComponent组件。PanGesture手势：用于触发拖动手势事件，滑动的最小距离为5vp时拖动手势识别成功。完整示例

gitee源码地址

源码下载

视频播放器（ArkTS）.zip

环境搭建

我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。

软件要求 DevEco Studio版本：DevEco Studio 3.1 Release及以上版本。HarmonyOS SDK版本：API version 9及以上版本。硬件要求设备类型：华为手机或运行在DevEco Studio上的华为手机设备模拟器。HarmonyOS系统：3.1.0 Developer Release及以上版本。环境搭建安装DevEco Studio，详情请参考下载和安装软件。设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。开发者可以参考以下链接，完成设备调试的相关配置：使用真机进行调试使用模拟器进行调试

代码结构解读

本篇Codelab只对核心代码进行讲解，对于完整代码，我们会在源码下载或gitee中提供。

No Preview

│──entry/src/main/ets // 代码区│ ├──common│ │ ├──bean│ │ │ └──VideoBean.ets // 视频bean对象│ │ ├──constants│ │ │ ├──CommonConstants.ets // 公共常量类│ │ │ ├──HomeConstants.ets // 首页常量类│ │ │ └──PlayConstants.ets // 视频播放页面常量类│ │ └──util│ │ ├──DateFormatUtil.ets // 日期工具类│ │ ├──Logger.ets // 日志工具类│ │ └──ScreenUtil.ets // 屏幕工具类│ ├──controller│ │ └──VideoController // 视频控制类│ ├──entryability│ │ └──EntryAbility.ts // 程序入口类│ ├──pages│ │ ├──HomePage.ets // 首页页面│ │ └──PlayPage.ets // 视频播放页面│ ├──view│ │ ├──HomeTabContent.ets // 首页Tab页面│ │ ├──HomeTabContentButton.ets // 首页按钮子组件│ │ ├──HomeTabContentDialog.ets // 添加网络视频弹框子组件│ │ ├──HomeTabContentList.ets // 视频列表子组件│ │ ├──HomeTabContentListItem.ets // 视频对象子组件│ │ ├──PlayControl.ets // 播放控制子组件│ │ ├──PlayPlayer.ets // 视频播放子组件│ │ ├──PlayProgress.ets // 播放进度子组件│ │ ├──PlayTitle.ets // 播放标题子组件│ │ └──PlayTitleDialog.ets // 播放速度设置子组件│ └──viewmodel│ ├──HomeDialogModel.ets // 添加网络视频弹框类│ └──HomeVideoListModel.ets // 获取视频列表数据类└──entry/src/main/resource // 应用静态资源目录

获取视频

视频来源主要有本地视频和网络视频两种方式，效果如图所示：

获取本地视频，通过resourceManager.ResourceManager对象获取rawfile文件夹中的视频对象videoBean，再通过“fd://${videoBean.fd}”组装视频地址。

网络视频是通过手动输入地址，在有网的环境下点击“链接校验”，通过地址获取视频时长，当视频时长小于等于零时弹出“链接校验失败”提示，否则弹出“链接校验成功”提示。

视频播放

视频播放主要包括视频的暂停、播放、切换、倍速播放、拖动进度条设置当前进度、显示当前播放时间、音量调节等功能，本章节主要针对播放管理类（下面简称：AVPlayer）进行讲解，具体细节请参考gitee源码，效果如图所示：

播放的全流程包含：创建AVPlayer，设置播放资源，设置播放参数（音量/倍速），播放控制（播放/暂停/上一个视频/下一个视频），重置，销毁资源。状态机变化如图所示：

视频播放之前需要初始化XComponent组件用于展示视频画面。XComponent组件初始化成功之后在onLoad()中获取surfaceID用于与AVPlayer实例关联。

使用AVPlayer前需要通过createAVPlayer()构建一个实例对象，并为AVPlayer实例绑定状态机，状态机具体请参考AVPlayerState。

AVPlayer实例需设置播放路径和XComponent中获取的surfaceID，设置播放路径之后AVPlayer状态机变为initialized状态，在此状态下调用prepare()，进入prepared状态。

在prepared状态下可获取当前播放路径对应视频的总时长，并执行play()进行视频播放。

视频播放后，变为playing状态，可通过“播放/暂停”按钮切换播放状态，当视频暂停时状态机变为paused状态。

可拖动进度条设置视频播放位置，也可滑动音量调节区域设置视频播放音量、设置播放速度。

视频播放完成之后，进入completed状态，需调用reset()对视频进行重置，此时变为idle转态，在idle状态下设置下一个视频的播放地址，又会进入initialized状态。

手势控制

播放页面通过绑定平移手势（PanGesture），上下滑动调节屏幕亮度，左右滑动调节视频音量，效果如图所示：

本章节以音量调节介绍手势控制，当手指触摸音量调节区域时获取当前屏幕坐标，滑动手指实时获取屏幕坐标并计算音量。

Preview

// PlayPage.etsColumn() {...Column()....gesture(PanGesture(this.panOptionBright).onActionStart((event: GestureEvent) => {this.playVideoModel.onBrightActionStart(event);}).onActionUpdate((event: GestureEvent) => {this.playVideoModel.onBrightActionUpdate(event);}).onActionEnd(() => {this.playVideoModel.onActionEnd();}))...Column()....gesture(PanGesture(this.panOptionVolume).onActionStart((event: GestureEvent) => {this.playVideoModel.onVolumeActionStart(event);}).onActionUpdate((event: GestureEvent) => {this.playVideoModel.onVolumeActionUpdate(event);}).onActionEnd(() => {this.playVideoModel.onActionEnd();}))...}...

总结

您已经完成了本次Codelab的学习，并了解到以下知识点：

AVPlayer组件的使用。XComponent组件的使用。PanGesture基础手势的使用。

进入华为专区，解锁更多内容

【本文地址】

公司简介

联系我们